<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
    <title>editor demo</title>
</head>
<body>
    <canvas id="canvas" width="640" height="480"></canvas>
    <div id="mapWrapper" style="
        position: absolute;
        z-index: 100;
        width: 520px; height: 320px;
        top: 360px;
        color: white;
        background: #00000080;">
        <div id="msg"></div>
        <p>[WIP] <a style="color: white;" href="https://github.com/w3reality/three-geo/tree/master/examples/editor">Source Code</a></p>
    </div>

    <!-- <script src="../deps/three.min.js"></script>
    <script src="../deps/stats.min.js"></script>
    <script src="../deps/OrbitControls.js"></script>

    <script src="../../dist/three-geo.min.js"></script> -->
    <!-- <script src="../../target/three-geo.js"></script> -->

    <!-- <script src="./index.js"></script> -->

    <script type="module">
    import Stats from '../deps/three/examples/jsm/libs/stats.module.js';
    import { OrbitControls } from '../deps/three/examples/jsm/controls/OrbitControls.js';

    (async () => {
        window.THREE = await import('../deps/three/build/three.module.js');
        const Threelet = (await import('../deps/threelet.esm.js')).default;

        const ThreeGeo = (await import('../../dist/three-geo.esm.js')).default;
        // const ThreeGeo = (await import('../../target/three-geo.esm.dev.js')).default;

        //

        THREE.Object3D.DefaultUp = new THREE.Vector3(0, 0, 1);

        const canvas = document.getElementById("canvas");
        const camera = new THREE.PerspectiveCamera(75, canvas.width/canvas.height, 0.001, 1000);
        camera.position.set(0, 0, 1.5);

        const renderer = new THREE.WebGLRenderer({
            // alpha: true,
            canvas: canvas,
        });

        const controls = new OrbitControls(camera, renderer.domElement);

        // object stuff

        const scene = new THREE.Scene();
        const walls = new THREE.LineSegments(
            new THREE.EdgesGeometry(new THREE.BoxBufferGeometry(1, 1, 1)),
            new THREE.LineBasicMaterial({color: 0xcccccc}));
        walls.position.set(0, 0, 0);
        scene.add(walls);
        scene.add(new THREE.AxesHelper(1));

        // render stuff

        const stats = new Stats();
        stats.showPanel(1); // 0: fps, 1: ms, 2: mb, 3+: custom
        document.body.appendChild(stats.dom);
        const render = () => {
            stats.update();
            renderer.render(scene, camera);
        };

        //

        controls.addEventListener('change', render);
        render(); // first time

        const tgeo = new ThreeGeo({
            tokenMapbox: '********', // <---- set your Mapbox API token here
        });

        if (0) {
            tgeo.tokenMapbox = 'zzzz';
            tgeo.setApiVector(`../cache/eiger/custom-terrain-vector`);
            tgeo.setApiRgb(`../cache/eiger/custom-terrain-rgb`);
            tgeo.setApiSatellite(`../cache/eiger/custom-satellite`);
        }

        const msg = document.getElementById('msg');
        const appendText = (el, text) => {
            const div = document.createElement('div');
            div.appendChild(document.createTextNode(text));
            el.appendChild(div);
        };

        if (tgeo.tokenMapbox.startsWith('****')) {
            const warning = 'Please set your Mapbox API token in ThreeGeo constructor.';
            appendText(msg, warning);
            throw warning;
        }

        //

        const origin = [46.5763, 7.9904];
        const radius = 5.0;
        const {proj, projInv, bbox, unitsPerMeter} =
            tgeo.getProjection(origin, radius);

        appendText(msg, `---- ROI ----`);
        appendText(msg, `lat lng: (${origin[0]}, ${origin[1]})`);
        appendText(msg, `radius: ${radius} [km]`);
        appendText(msg, `units per km: ${unitsPerMeter * 1000}`);
        appendText(msg, `bbox (w, s, e, n): (${bbox.map(q => q.toFixed(4)).join(', ')})`);
        appendText(msg, `---- Log ----`);

        const terrain = await tgeo.getTerrainRgb(origin, radius, 12);
        scene.add(terrain);

        terrain.children.forEach((mesh, idx) => {
            mesh.material.wireframe = true;
            // mesh.material.side = THREE.DoubleSide;

            // How to access the post-processed heightmap
            console.log('rgb DEM mesh:', mesh);
            const position = mesh.geometry.attributes.position;
            const arr = position.array;
            console.log('arr.length:', arr.length); // 3x128x128 (+ deltaSeams)

            if (idx % 2 > 0) return;

            for (let i = 0; i < arr.length; i += 3) { arr[i+2] = 0; }
            position.needsUpdate = true;
        });

        // FIXME: odd laser reflection...
        const laser = new ThreeGeo.Laser({color: 0xff00ff});
        laser.setSource(new THREE.Vector3(0, 0, 0), camera);
        laser.pointWithRaytrace(new THREE.Vector3(0, -0.5, 0), terrain.children);
        scene.add(laser);

        render();
    })();
    </script>
</body>
</html>
